1.创建项目并安装依赖 vue init webpack 项目名称 依赖 axios elemntui vuex less lessloader
2.整理文件夹
3.配置main.js router/store->index.js
4.再bulid文件中的webpack.dev.conf.js中配置API接口
5.完成App.vue的页面布局
<template>
  <div id="app">
    <!--头部-->
    <Header></Header>
    <!--底部导航栏-->
    <div class="tab">
      <div class="tab-item">
        <img src="./assets/消息.png">
        <br>
        <router-link class="index_bottom" to="/seller">首页</router-link>
      </div>
      <div class="tab-item">
          <img src="./assets/消息.png">
        <br>
        <router-link class="index_bottom" to="/goods">信息</router-link>
      </div>
      <div class="tab-item">
          <img src="./assets/消息.png">
        <br>
        <router-link class="index_bottom" to="/ratings">我的</router-link>
      </div>
    </div>
    <router-view/>
  </div>
</template>

<script>
import Header from './components/header/Header'
export default {
  name: 'App',
  data () {
    return {
      activeIndex: '1'
    }
  },
  methods: {
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    }
  },
  components: {
    Header
  }
}

</script>

<style scoped lang="less">

#app .tab{
  display: flex;
  width: 100%;
  line-height: 60px;
  border-top: 1px solid rgba(7,17,27,0.1);
  position: fixed;
  text-align: center;
  bottom: 0;
  .tab-item{
    flex: 1;
    text-align: center;
    height: 60px;
    /*line-height: 80px;*/
    img{
      width: 40px;
    }
    .index_bottom{
      font-size: 15px;
      position: relative;
      bottom: 45px;
    }
  }
}
</style>
